<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <div>
    <van-tabbar v-model="active" fixed placeholder>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/sort">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/shopping"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="contact-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const active = ref(route.meta.index);
</script>
<style>
.van-tabbar-item--active {
  text-align: center;
}
</style>
